import { changeCarCount } from "@/store/modules/coffeeOrder";
import { orderType } from "@/type/coffeeType";
import { seleFM } from "@/utils/seleFormat";
import { Button } from "antd";
import React, { FC, memo } from "react";
import { useDispatch } from "react-redux";
import { CarSelectWrapper } from "./style";

interface IProps {
  item: orderType;
  showMore?: boolean;
}

const CarSelect: FC<IProps> = memo((props) => {
  const { item, showMore = true } = props;

  const dispatch = useDispatch();

  const changeCount = (num: number) => {
    dispatch(changeCarCount({ item, num }));
  };

  return (
    <CarSelectWrapper>
      <div className="box">
        <div className="top">
          <div className="name">
            {item.name}
            {showMore && (
              <span className="unit-price"> 『单价{item.price}元』</span>
            )}
          </div>
          <div className="countBox">
            {showMore && (
              <Button
                className="btn"
                size="small"
                shape="circle"
                disabled={item.count <= 1}
                onClick={() => changeCount(-1)}
              >
                -
              </Button>
            )}

            <div className="count">{item.count} 杯</div>
            {showMore && (
              <Button
                className="btn"
                size="small"
                shape="circle"
                onClick={() => changeCount(1)}
              >
                +
              </Button>
            )}
          </div>
        </div>

        <div className="bottom">
          <div className="size">{seleFM(item.size)}</div>
          <div
            className="ice"
            style={{ textAlign: showMore ? "left" : "center" }} //看showMore是否需要对齐
          >
            {seleFM(item.iceLevel)}
          </div>
          <div
            className="suger"
            style={{ textAlign: showMore ? "left" : "right" }}
          >
            {seleFM(item.sugerLevel)}
          </div>
          {showMore && (
            <div className="price">共 {item.count * item.price} 元</div>
          )}
        </div>
      </div>
    </CarSelectWrapper>
  );
});

export default CarSelect;
